<template>
  <el-main>
    <el-card shadow="never" header="分步表单">
      <el-steps :active="active" align-center style="margin-bottom: 20px">
        <el-step title="填写转账信息"></el-step>
        <el-step title="确认转账信息"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
      <el-row>
        <el-col :lg="{ span: 8, offset: 8 }">
          <el-form
            v-if="active == 0"
            ref="stepForm_0"
            :model="form"
            :rules="rules"
            label-position="top"
          >
            <el-form-item label="付款账户" prop="paymentAccount">
              <el-select v-model="form.paymentAccount" clearable>
                <el-option label="sakuya@scui.com" value="sakuya@scui.com"></el-option>
                <el-option label="lolicode@scui.com" value="lolicode@scui.com"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="收款账户" prop="collectionAccount">
              <el-input v-model="form.collectionAccount" clearable></el-input>
            </el-form-item>
            <el-form-item label="收款人姓名" prop="collectionName">
              <el-input v-model="form.collectionName" clearable></el-input>
            </el-form-item>
            <el-form-item label="转账金额" prop="amount">
              <el-input v-model="form.amount"></el-input>
            </el-form-item>
          </el-form>
          <el-form
            v-if="active == 1"
            ref="stepForm_1"
            :model="form"
            :rules="rules"
            label-position="top"
          >
            <el-alert
              title="确认转账后，资金将直接打入对方账户，无法退回。"
              type="warning"
              show-icon
              style="margin-bottom: 15px"
            />
            <el-descriptions :column="1" border>
              <el-descriptions-item label="付款账户">{{
                form.paymentAccount
              }}</el-descriptions-item>
              <el-descriptions-item label="收款账户">{{
                form.collectionAccount
              }}</el-descriptions-item>
              <el-descriptions-item label="收款人姓名">{{
                form.collectionName
              }}</el-descriptions-item>
              <el-descriptions-item label="转账金额">{{ form.amount }} 元</el-descriptions-item>
            </el-descriptions>
            <el-divider></el-divider>
            <el-form-item label="支付密码" prop="payPassword">
              <el-input v-model="form.payPassword" show-password placeholder="请输入"></el-input>
            </el-form-item>
          </el-form>
          <div v-if="active == 2">
            <el-result icon="success" title="操作成功" sub-title="预计两小时内到账">
              <template #extra>
                <el-button type="primary" @click="again">再转一笔</el-button>
                <el-button>查看账单</el-button>
              </template>
            </el-result>
          </div>
          <el-button v-if="active > 0 && active < 2" :disabled="submitLoading" @click="pre"
            >上一步</el-button
          >
          <el-button v-if="active < 1" type="primary" @click="next">下一步</el-button>
          <el-button v-if="active == 1" type="primary" :loading="submitLoading" @click="submit"
            >提交</el-button
          >
        </el-col>
      </el-row>
    </el-card>
  </el-main>
</template>

<script>
export default {
  name: 'Stepform',
  data() {
    return {
      active: 0,
      submitLoading: false,
      form: {
        paymentAccount: 'lolicode@scui.com',
        collectionAccount: 'test@example.com',
        collectionName: 'Lolowan',
        amount: '100',
        payPassword: ''
      },
      rules: {
        paymentAccount: [
          {
            required: true,
            message: '请选择付款账户'
          }
        ],
        collectionAccount: [
          {
            required: true,
            message: '请输入收款账户'
          }
        ],
        collectionName: [
          {
            required: true,
            message: '请输入收款人姓名'
          }
        ],
        amount: [
          {
            required: true,
            message: '请输入转账金额'
          }
        ],
        payPassword: [
          {
            required: true,
            message: '需要支付密码才能进行支付'
          }
        ]
      }
    }
  },
  mounted() {},
  methods: {
    //下一步
    next() {
      const formName = `stepForm_${this.active}`
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.active += 1
        } else {
          return false
        }
      })
    },
    //上一步
    pre() {
      this.active -= 1
    },
    //提交
    submit() {
      const formName = `stepForm_${this.active}`
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.submitLoading = true
          setTimeout(() => {
            this.submitLoading = false
            this.active += 1
          }, 1000)
        } else {
          return false
        }
      })
    },
    //再来一次
    again() {
      this.active = 0
    }
  }
}
</script>

<style scoped>
.el-steps:deep(.is-finish) .el-step__line {
  background: var(--el-color-primary);
}
</style>
